<template>
  <div>
    <div class="div_group_title">基础</div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="tab1" name="tab1">
        <component :is="'page_tab_tab1'"></component>
      </el-tab-pane>
      <el-tab-pane label="tab2" name="tab2">
        <component :is="'page_tab_tab2'"></component>
      </el-tab-pane>
    </el-tabs>
    <div class="div_group_title">选项卡</div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="tab1" name="tab1">
        <component :is="'page_tab_tab1'"></component>
      </el-tab-pane>
      <el-tab-pane label="tab2" name="tab2">
        <component :is="'page_tab_tab2'"></component>
      </el-tab-pane>
    </el-tabs>
    <div class="div_group_title">卡片</div>
    <el-tabs type="border-card" style="margin-top: 10px;">
      <el-tab-pane label="tab1">
        <component :is="'page_tab_tab1'"></component>
      </el-tab-pane>
      <el-tab-pane label="tab2">
        <component :is="'page_tab_tab2'"></component>
      </el-tab-pane>
    </el-tabs>
    <div class="div_group_title">位置</div>
    <el-tabs type="border-card" style="margin-top: 10px;" tabPosition="left">
      <el-tab-pane label="tab1">
        <component :is="'page_tab_tab1'"></component>
      </el-tab-pane>
      <el-tab-pane label="tab2">
        <component :is="'page_tab_tab2'"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import page_tab_tab1 from "./page_tab_tab1.vue";
import page_tab_tab2 from "./page_tab_tab2.vue";

let $this, yFree, Global, IJkid, IFinal, AppUtils;

export default {
  components: {
    "page_tab_tab1": page_tab_tab1,
    "page_tab_tab2": page_tab_tab2,
  },
  data() {
    return {
      activeName: "tab1",
    }
  },
  beforeCreate() {
    $this = this, yFree = $this.yFree, Global = $this.Global, IJkid = $this.IJkid, IFinal = $this.IFinal, AppUtils = $this.AppUtils;
  },
  created() {
  },
  methods: {
    handleClick(tab, event) {
      yFree.yToast(tab.paneName);
    },
  },
};
</script>

<style scoped>
.div_group_title {
  font-size: 20px;
  margin-top: 10px;
  color: red;
}
</style>
